<template>
<div v-for="(book, index) in c.books" :key="book.id" >
    <p>------------</p>
    <book-info :bookInfo="bookInfos"></book-info>
    <div><router-link :to="'/book/'+book.id" >查看所有章节</router-link></div>
  </div>
</template>

<script>
import service from "@/utils/request"
import { ref, reactive, defineComponent } from "vue"
import BookInfo from '@c/ranking/BookInfo.vue'

export default defineComponent({
  name: 'Test',
  components: {
    BookInfo
  },
  setup () {
    
    const html = ref('')
    const c = reactive({
      gender: [''],
      major: [''],
      minor: [''],
      type: [''],
      bookInfos: [
        {
          name: '',
          author: '',
          id: '',
          desc: '',
          popularity: '',
          keep: ''
        }
      ],
    })
    
    service.get('/category', {
      params: {
        gender: '',
        type: '',
        major: '',
        minor: ''
      }
    }).then(res => {
      const data = res.data
      html.value = data
      c.gender = data.gender
      c.major = data.major
      c.minor = data.minor
      c.type = data.type
      c.bookInfos = data.bookInfos
      console.log(res)
    })
    
    return {
      html,
      c,
    }
  }
  
})

</script>

<style>
</style>
